{% extends "base.html" %}

{% block subtitle %}
  Preferences
{% endblock subtitle %}

{% block navbar_breadcrumb %}
  <ul class="nav navbar-nav oppia-navbar-breadcrumb">
    <li>
      <span class="oppia-navbar-breadcrumb-separator"></span>
      Preferences
    </li>
  </ul>
{% endblock navbar_breadcrumb %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.LANGUAGE_CODES_AND_NAMES = JSON.parse(
      '{{LANGUAGE_CODES_AND_NAMES|js_string}}');
  </script>

  <style>
    html, body {
      background-color: #eee;
    }
  </style>
{% endblock header_js %}

{% block content %}
  <div class="oppia-dashboard-container ng-scope" ng-controller="Preferences">
    <h2 class="oppia-page-heading">Preferences</h2>
    <span style="font-size: smaller; position: absolute; opacity: 0.7; top: 130px;">
      Any changes that you make on this page will be auto-saved.
    </span>
    <md-card class="oppia-page-card">
       <div class="row">
        <div role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2">Email</label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              {{user_email}}
              <span class="help-block" style="font-size: smaller">
                Only moderators and site admins can see this.
              </span>
            </div>
          </div>
        </div>

        <div role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2">Username</label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              {% if username %}
                {{username}}
              {% else %}
                <em>Not yet selected</em>
              {% endif %}
            </div>
          </div>
        </div>

        <div role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2"></label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              <div class="oppia-editable-section" title="Change profile picture" style="height: 150px; width: 150px">
                <div class="oppia-click-to-start-editing" ng-click="showEditProfilePictureModal()"></div>
                <span class="glyphicon glyphicon-pencil oppia-editor-edit-icon" style="right: 5px;"></span>
                <img ng-if="profilePictureDataUrl" ng-src="<[profilePictureDataUrl]>" class="img-thumbnail">
                <img ng-if="!profilePictureDataUrl" src="/images/general/no_profile_picture.png" class="img-thumbnail">
              </div>
            </div>
          </div>
        </div>

        <hr>

        <div role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2">Bio</label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              <textarea ng-model="userBio" ng-blur="saveUserBio(userBio)" rows="5"></textarea>
              <span class="help-block" style="font-size: smaller">
                This field is optional. Anything you write here is public and
                world-viewable.
              </span>
            </div>
          </div>
        </div>

        <div role="form" class="form-horizontal">
          <div class="form-group">
            <label class="col-lg-2 col-md-2 col-sm-2">Preferred Languages</label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              <!--
                If the ng-if is omitted, the select2-dropdown directive won't be
                updated after the initial page load.
              -->
              <div ng-if="hasPageLoaded">
                <select2-dropdown choices="LANGUAGE_CHOICES"
                  item="$parent.preferredLanguageCodes" allow-multiple-choices="true"
                  new-choice-regex=".^" width="400"
                  placeholder="Select preferred languages..."
                  on-selection-change="savePreferredLanguageCodes($parent.preferredLanguageCodes)">
                </select2-dropdown>
              </div>
              <span class="help-block" style="font-size: smaller">
                These languages will be selected by default when you search the
                gallery for explorations.
              </span>
            </div>
          </div>
        </div>
      </div>
      <script type="text/ng-template" id="modals/editProfilePicture">
        <div class="modal-header">
          <h3>Upload Profile Picture</h3>
        </div>

        <div class="modal-body" style="min-height: 300px;">
          <div class="oppia-profile-image-uploader">
            <div ng-hide="uploadedImage">
              <image-uploader on-file-changed="onFileChanged">
              </image-uploader>
            </div>

            <div class="oppia-form-error" ng-if="invalidImageWarningIsShown" style="margin-top: 15px;">
              Error: Could not read image file.
            </div>

            <div ng-show="uploadedImage">
              Drag to crop and resize:
              <div class="oppia-profile-picture-crop-area" ng-show="uploadedImage">
                <button class="btn btn-default oppia-profile-picture-reset-button" ng-click="reset()">
                  <span class="glyphicon glyphicon-remove"></span>
                </button>
                <img-crop image="uploadedImage" result-image="croppedImageDataUrl"
                          area-type="square" result-image-size="150"
                          on-load-error="onInvalidImageLoaded()"
                          result-image-format="image/png">
                </img-crop>
              </div>
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button class="btn btn-default" ng-click="cancel()">Cancel</button>
          <!--
            The two checks for ng-disabled are necessary. The former is needed because
            img-crop loads a default white image even when nothing is uploaded. The latter
            is needed to prevent the saving of invalid files.
          -->
          <button class="btn btn-success" ng-click="confirm()" ng-disabled="!uploadedImage || !croppedImageDataUrl">
            Add Profile Picture
          </button>
        </div>
      </script>
    </md-card>
  </div>
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('/profile/Preferences.js') }}
  </script>
{% endblock footer_js %}
